
<template>
  <div>
    <MyTable
      action="mockData"
      ref="configTable" 
      :columns="columns"
      :params="searchForm"
      :server="server"
    >
      <Form
        :model="searchForm"
        ref="searchForm"
        slot="search-bar"
        inline
      >
        <FormItem
          prop="province"
          label="省份"
        >
          <Input
            type="text"
            v-model="searchForm.province"
            clearable
          />
        </FormItem>
        <FormItem
          prop="cityName"
          label="城市名称"
        >
          <Input
            type="text"
            v-model="searchForm.cityName"
            clearable
          />
        </FormItem>
        <FormItem
          prop="cityType"
          label="城市类型"
        > 
        </FormItem>
        <FormItem
          prop="cityType"
          label="城市类型"
        > 
        </FormItem>
        <FormItem
          prop="cityType"
          label="城市类型"
        > 
        </FormItem>
        <FormItem
          prop="cityType"
          label="城市类型"
        >
        
        </FormItem>
        <FormItem
          prop="isHot"
          label="是否热门"
        >
          <Select
            v-model="searchForm.isHot" 
            clearable
          >
            <Option value="1">是</Option>
            <Option value="2">否</Option>
          </Select>
        </FormItem>
         <FormItem
          prop="isHot"
          label="是否热门"
        >
          <Select
            v-model="searchForm.isHot" 
            clearable
          >
            <Option value="1">是</Option>
            <Option value="2">否</Option>
          </Select>
        </FormItem>
         <FormItem
          prop="isHot"
          label="是否热门"
        >
          <Select
            v-model="searchForm.isHot" 
            clearable
          >
            <Option value="1">是</Option>
            <Option value="2">否</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="handle-bar">
        <Button
          @click.native="search()"
          type="warning"
          icon="search"
        >查询</Button>
        <Button
          @click.native="reset"
          type="info"
          icon="loop"
        >重置</Button>
      </div>
      <div slot="table-bar">
        <Button
          type="warning"
          icon="plus-round"
          @click="add"
        >新增</Button>
      </div>
    </MyTable> 
    <vxe-table></vxe-table>
  </div>
</template>
<script>

import MyTable from "./components/MyTable/index.vue"
import Vue from "vue";
import iview from "iview";
Vue.use(iview);
// Vue.use(MyTable);
// import { EMSTable, DataSelect } from "ems-plugin"; 
export default {
  components: { MyTable
  },
  data() {
    return { 
      server:this,
      /* 搜索框组 */
      dataSet: {
        HOSPITALITY_AREA_TYPE: null,
        cityTypes: null,
      },
      searchForm: {
        cityName: "",
        cityType: "",
        isHot: "",
        province: "",
      },
      columns: [
        {
          title: "操作",
          key: "action",
          width: 70,
          align: "center",
          fixed: "left",
          slots: {
            default: (obj, h) => {
              return [
                //编辑
                h("Button", {
                  props: {
                    icon: "edit",
                    type: "text",
                  },
                  attrs: {
                    title: "编辑"
                  },
                  on: {
                    click: () => { 
                    }
                  }
                }),
                //删除
                h("Button", {
                  props: {
                    icon: "trash-a",
                    type: "text",
                  },
                  attrs: {
                    title: "删除"
                  },
                  on: {
                    click: () => { 
                    }
                  }
                })
              ];
            }
          } 
        },
        {
          title: "ID",
          align: "center",
          key: "cityId",
          minWidth: 100
        },
        {
          title: "省份",
          align: "center",
          key: "province",
          minWidth: 120
        },
        {
          title: "城市",
          align: "center",
          key: "cityName",
          minWidth: 100,
        },
        {
          title: "城市类型",
          align: "center",
          key: "cityType",
          minWidth: 130,
          slots: {
            default: ({ row }, h) => {
              return [
                h("span",  row.cityType || "")
              ];
            }
          }
          // render: (h, params) => {
          //   const self = this;
          //   let val = params.row.cityType && self.dataSet.cityTypes ? self.dataSet.cityTypes[params.row.cityType] : "";
          //   return h(
          //     "div",
          //     {
          //       attrs: {
          //         class: "ivu-table-cell ivu-table-cell-ellipsis",
          //         title: val,
          //       },
          //     },
          //     val
          //   );
          // },
        },
        {
          title: "是否是热门城市",
          align: "center",
          key: "isHot",
          minWidth: 100,
          slots: {
            default: ({ row }, h) => {
              let val = row.isHot;
              if (!val) return;
              return [h(
                "Tag",
                {
                  props: {
                    type: "dot",
                    color: val == 1 ? "blue" : "red",
                  },
                },
                val == 1 ? "是" : "否"
              )]
            },
          }
        },
        {
          title: "城市首字母",
          align: "center",
          key: "cityFirstName",
          minWidth: 80
        },
        {
          title: "城市简称",
          align: "center",
          key: "cityAbbreviation",
          minWidth: 100
        },
        {
          title: "城市全拼",
          align: "center",
          key: "fullCityName",
          minWidth: 130
        },
        {
          title: "地区类型",
          align: "center",
          key: "areaType",
          minWidth: 80,
          slots: {
            default: ({ row }, h) => { 
              let val =  row.areaType  
              return [h('span', val)]
            }
          },
        },
      ],
    };
  },
  computed: {},
  beforeCreate(){ 
  },
  created: function () { },
  beforeMount: function () { },
  mounted: function () {
    // this.$refs["configTable"]
  },
  beforeDestroy: function () { },
  destroyed: function () { },
  methods: {
    mockData(params){ 
        return new Promise((resolve)=>{
          let list = []
          console.log('mockData',params);
          for (let index = 0; index < params.page.pageSize; index++) {
            list.push({
              cityId: `名称${params.page.currentPage}+----+${index}`,
              province: '0'+index,
              cityName: 123,
              cityType: 18,
              isHot: 234,
              cityFirstName: 3,
              cityAbbreviation: 'shenzhen'+index+'-'+index,
              fullCityName:"xxxx"+index,
              areaType:index
            })
          }
          let obj ={
            data:{
              pageNum:params.page.currentPage++,
              total:1000,
              list:list
            }
          } 
       resolve(obj);
     })
    },
    /**
     * 选择城市类型 触发值
     */
    chanage_cityType(data) {
      console.info(data);
    },
    /**
     * 搜索
     */
    search(page) {
      this.$refs["configTable"].load(this.searchForm, page);
    },
    /**
     * 重置
     */
    reset() {
      this.$refs["searchForm"].resetFields();
      this.search(1);
    },
    /**
     * 添加
     */
    add() {
     
    },
    /**
     * 编辑
     * @param row   行数据
     */
    edit() { 
    },
    /**
     * 删除
     * @param row   行数据
     */
    remove() {
      //调用删除
      this.$Modal.confirm({
        title: "删除提示",
        content: "<p>确定要删除该记录吗？</p>",
        "ok-text": "确定",
        "cancel-text": "取消",
        onOk: () => {
           
        },
        onCancel: () => {
          // this.$Message.info('Clicked cancel');
        },
      });
    },
  },
  watch: {},
  directives: {},
};
</script>
<style>
/* .page-smallClass .ivu-FormItem-content {
  display: block;
} */
</style>

